<template>
	<view class="plantbox">
		<uni-titles :title="'新建地块'"></uni-titles>
		<view class="Stepbox">
			<u-steps current="0" activeIcon="checkmark" :activeColor="'#64C533'" :inactiveColor="'#A1D6BA'">
				<u-steps-item v-for="(d, index) in steplist" :title="d.name" :key="d.name">
					<view class="steptop" :class="{ act: index < 3 }" slot="icon">{{ d.id }}</view>
				</u-steps-item>
			</u-steps>
		</view>
		<uni-onlytitlelist :title="'种植信息'" >
			<view class="foundationTtem fs-24" :class="'foundationTtem' + d.choose" v-for="(d, index) in list" :key="d.id">
				<view class="name">{{ d.name }}</view>
				<view class="text">{{ d.text }}</view>
				<view class="type">{{ d.type }}</view>
			</view>
		</uni-onlytitlelist>
		<uni-onlytitlelist :title="'人员配置'"  >
			<view class="people mar-top34">
				<view class="fs-28">选择角色</view>
				<u-radio-group v-model="radiovalue1" placement="row" iconPlacement="left" @change="groupChange">
					<u-radio
						:labelSize="'24rpx'"
						:customStyle="{ marginLeft: '30rpx' }"
						activeColor="#07C160"
						v-for="(item, index) in radiolist1"
						:key="item.id"
						:label="item.name"
						:name="item.name"
						@change="radioChange"
					></u-radio>
				</u-radio-group>
			</view>
			<uni-inputs :title="'农场主'" :placeholder="'请选择'" icon readonly :margin="[30, 0, 30, 0]"></uni-inputs>
			<uni-inputs :title="'农服人员'" :placeholder="'请选择'" icon readonly :margin="[30, 0, 30, 0]"></uni-inputs>
		</uni-onlytitlelist>
		<uni-onlytitlelist :title="'绑定设备'"  >
			<view class="Rightbtn">
				<view class="btn"><u-button text="增加设备" type="success"></u-button></view>
			</view>

			<uni-inputs :title="'设备名称'" :placeholder="'请选择物联设备'" icon readonly :margin="[30, 0, 30, 0]"></uni-inputs>
			<uni-inputs :title="'设备SM码'" :placeholder="'请输入设备SM码'" icon readonly :margin="[30, 0, 30, 0]"></uni-inputs>
		</uni-onlytitlelist>
		<view v-for="(d, index) in shebeiList" :key="d.name">
			<uni-onlytitlelist :title="'设备' + (index + 1)"  >
				<view class="Peizhibox fs-24">
					<view class="item">
						<view class="textbox mar-top30">
							<view class="title">设备名称</view>
							<view>{{ d.name }}</view>
						</view>
						<view class="textbox mar-top30">
							<view class="title">设备SM码</view>
							<view>{{ d.customer }}</view>
						</view>
					</view>
					<view class="rightcontent">
						<u--image :mode="'aspectFill'" :src="deleteIcon" width="30rpx" height="30rpx"></u--image>
						<view class="mar-left6">删除</view>
					</view>
				</view>
			</uni-onlytitlelist>
		</view>
		<view class="Btnbox">
			<view><uni-lastbtn :text="'取消'" :bgColor="'#B2CEA4'" :width="'280rpx'" @btnfun="btnfun"></uni-lastbtn></view>
			<view class="mar-left48"><uni-lastbtn :text="'保存'" :width="'280rpx'" @btnfun="btnfun"></uni-lastbtn></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			deleteIcon:
				'',

			steplist: [{ name: '创建田块', id: 1 }, { name: '选择种植', id: 2 }, { name: '选择资源', id: 3 }],
			// stepact: 1,
			list: [
				{
					name: '地块类型',
					text: '大棚',
					choose: 'dklx'
				},
				{
					name: '地块名称',
					text: '番茄园地'
				},
				{
					name: '作物名称',
					text: '番茄'
				},
				{
					name: '占地面积',
					text: '125.2亩'
				},
				{
					name: '种植地址',
					text: '天府广场种植园'
				}
			],
			radiolist1: [
				{
					name: '农场主',
					disabled: false,
					id:1
				},
				{
					name: '农服人员',
					disabled: false,
					id:2
				}
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			radiovalue1: '农服人员',
			shebeiList: [
				{
					name: '物联摄像头',
					customer: 'shjk-253652856852366'
				},
				{
					name: '物联摄像头',
					customer: 'shjk-253652856852367'
				},
				{
					name: '物联摄像头',
					customer: 'shjk-253652856852367'
				},
				{
					name: '物联摄像头',
					customer: 'shjk-253652856852367'
				}
			]
		};
	},
	computed: {},
	onShow() {},
	onHide() {},
	methods: {
		changeitem(index) {
			this.act = index;
		},
		btnfun() {
			uni.navigateTo({
				url: '/subpkg/drawmaps/resources'
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}
.people {
	display: flex;
}
</style>
